src/app/features/dashboard_Id/api/putCard.ts (1)

10-19: 에러 처리 개선 제안

API 함수에 에러 처리가 없어 네트워크 오류나 서버 에러 시 적절한 처리가 어렵습니다.

다음과 같이 에러 처리를 추가하는 것을 고려해보세요:

export async function putCard(
  payload: CardModifyFormData,
  cardId: number,
): Promise<ApiResponse> {
-  const res = await api.put(
-    `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`,
-    payload,
-  )
-  return res.data
+  try {
+    const res = await api.put(
+      `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`,
+      payload,
+    )
+    return res.data
+  } catch (error) {
+    console.error('Card update failed:', error)
+    throw error
+  }
}

tailwind.config.ts (1)

21-21: 주석 오타 수정 필요

tablet breakpoint 주석이 잘못되어 있습니다. 실제로는 376px ~ 744px입니다.

주석을 다음과 같이 수정해주세요:

-        tablet: { raw: '(min-width: 376px) and (max-width: 744px)' }, // 376 ~ 1919px
+        tablet: { raw: '(min-width: 376px) and (max-width: 744px)' }, // 376 ~ 744px

src/app/features/dashboard_Id/store/useColumnsStore.ts (3)

3-6: 타입 정의 분리 고려

SimpleColumn 인터페이스를 별도 타입 파일로 분리하거나, 기존 타입 파일에 추가하는 것을 고려해보세요. 다른 컴포넌트에서도 사용될 가능성이 높습니다.

예를 들어, ../type/Column.type.ts 파일을 생성하거나 기존 타입 파일에 추가:

// ../type/Column.type.ts
export interface SimpleColumn {
  columnId: number
  columnTitle: string
}

그리고 스토어에서는 import하여 사용:

import { create } from 'zustand'
+import { SimpleColumn } from '../type/Column.type'

-export interface SimpleColumn {
-  columnId: number
-  columnTitle: string
-}

---

8-8: 네이밍 일관성 검토

ColumnsInDashboard 속성명이 PascalCase를 사용하고 있어 일반적인 camelCase 컨벤션과 다릅니다.

일관성을 위해 camelCase를 사용하는 것을 권장합니다:

interface ColumnsStore {
-  ColumnsInDashboard: SimpleColumn[]
+  columnsInDashboard: SimpleColumn[]
  setColumns: (data: SimpleColumn[]) => void
}

export const useColumnsStore = create<ColumnsStore>((set) => ({
-  ColumnsInDashboard: [],
+  columnsInDashboard: [],
-  setColumns: (data) => set({ ColumnsInDashboard: data }),
+  setColumns: (data) => set({ columnsInDashboard: data }),
}))

---

12-13: 주석 개선 제안

주석이 한국어로 되어 있는데, 코드베이스의 언어 일관성을 확인해보세요.

다음과 같이 더 자세한 주석을 추가하는 것을 고려해보세요:

-// 카드 수정 모달에서 사용하는 가공된 컬럼 데이터
-// page.tsx의 useEffect에서 초기 설정됨
+/**
+ * 대시보드 내 컬럼 정보를 관리하는 전역 스토어
+ * - 카드 수정 모달에서 컬럼 선택 시 사용
+ * - page.tsx의 useEffect에서 초기 데이터 설정
+ */

src/app/features/dashboard_Id/api/usePutCardMutation.ts (3)

5-5: 미사용 import를 제거해주세요.

postCard가 import되었지만 이 파일에서 사용되지 않습니다. 불필요한 import를 제거해주세요.

-import { postCard } from './postCard'

---

8-8: 주석과 에러 메시지가 부정확합니다.

이 훅은 카드 수정을 위한 것인데 주석과 에러 로그에서 "카드 생성"이라고 표기되어 있습니다. 정확한 설명으로 수정해주세요.

-// ✅ 카드 생성 모달에서 사용 (CreateCardForm.tsx)
+// ✅ 카드 수정 모달에서 사용 (ModifyCardForm.tsx)

-        console.error('카드 생성 실패:', message ?? '알 수 없는 에러')
+        console.error('카드 수정 실패:', message ?? '알 수 없는 에러')

-        console.error('카드 생성 실패:', error)
+        console.error('카드 수정 실패:', error)

Also applies to: 26-26, 28-28

---

21-21: 쿼리 키를 더 구체적으로 설정하는 것을 고려해주세요.

현재 ['cardId']는 너무 일반적입니다. 특정 카드나 컬럼의 데이터만 무효화하도록 더 구체적인 키를 사용하는 것이 성능상 유리할 수 있습니다.

-      queryClient.invalidateQueries({ queryKey: ['cardId'] })
+      queryClient.invalidateQueries({ queryKey: ['card', cardId] })

src/app/features/dashboard_Id/Card/ColumnTitle.tsx (1)

1-1: Props 타입을 interface로 정의하는 것을 고려해보세요.

현재 인라인으로 정의된 props 타입을 별도 interface로 추출하면 재사용성과 유지보수성이 향상됩니다.

+interface ColumnTitleProps {
+  title: string
+}
+
-export default function ColumnTitle({ title }: { title: string }) {
+export default function ColumnTitle({ title }: ColumnTitleProps) {

src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx (1)

118-118: 하드코딩된 너비값 대신 반응형 클래스 사용을 권장합니다.

w-520 클래스로 고정 너비를 설정하는 것보다 w-full 같은 반응형 클래스를 사용하는 것이 다양한 화면 크기에서 더 나은 사용자 경험을 제공할 수 있습니다.

-                className="Input-readOnly w-520"
+                className="Input-readOnly w-full"

src/app/features/dashboard_Id/Card/TagsCanDelete.tsx (1)

3-3: 사용되지 않는 import를 제거해주세요.

getColor 유틸리티 함수가 import되었지만 실제로는 사용되지 않고 있습니다. 코드 정리를 위해 제거하는 것이 좋겠습니다.

-import { getColor } from '@/app/shared/lib/getColor'

src/app/features/dashboard_Id/Card/Tags.tsx (1)

25-28: 테마별 색상 로직을 개선하세요.

다크모드에서 텍스트 색상으로 라이트모드 배경색을 사용하는 로직이 직관적이지 않습니다.

-        const backgroundColor = isDark
-          ? bgColorsDark[colorIndex]
-          : bgColors[colorIndex]
-        const textColor = isDark ? bgColors[colorIndex] : textColors[colorIndex]
+        const backgroundColor = isDark ? bgColorsDark[colorIndex] : bgColors[colorIndex]
+        const textColor = isDark ? '#FFFFFF' : textColors[colorIndex]

또는 다크모드 전용 텍스트 색상 배열을 추가하여 더 명확하게 관리할 수 있습니다.

src/app/features/dashboard_Id/Card/Card.tsx (2)

22-22: 상태 변수명을 더 명확하게 하세요.

openCard 변수명이 모호합니다. 카드를 여는 것이 아니라 모달을 여는 것이므로 더 명확한 이름을 사용하는 것이 좋겠습니다.

-  const [openCard, setOpenCard] = useState(false) //card.tsx
+  const [isModalOpen, setIsModalOpen] = useState(false)

그리고 해당하는 곳의 setOpenCard도 setIsModalOpen으로 변경해야 합니다.

---

57-69: 마감일 표시 로직을 개선하세요.

현재 캘린더 아이콘은 항상 표시되지만 마감일이 없는 경우에도 보여집니다. 사용자에게 혼란을 줄 수 있습니다.

-        <div className="flex size-full items-center gap-6">
-          <Image
-            src={'/images/calendar.svg'}
-            alt="마감일"
-            width={18}
-            height={18}
-          />
-          {dueDate && (
-            <div className="Text-gray mt-4 text-12 font-medium leading-none">
-              {dueDate.split(' ')[0]}
-            </div>
-          )}
-        </div>
+        {dueDate && (
+          <div className="flex size-full items-center gap-6">
+            <Image
+              src={'/images/calendar.svg'}
+              alt="마감일"
+              width={18}
+              height={18}
+            />
+            <div className="Text-gray mt-4 text-12 font-medium leading-none">
+              {dueDate.split(' ')[0]}
+            </div>
+          </div>
+        )}

src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx (1)

35-35: 주석 내용을 수정하세요.

35번 줄 주석에서 "담당자 업데이트"라고 되어 있지만, 실제로는 assignee(담당자)를 업데이트하는 것이 맞습니다. 혼동을 피하기 위해 정확한 내용으로 수정해주세요.

-            setAssignee(assignee) // 담당자 업데이트
+            setAssignee(assignee) // 선택된 담당자 설정

src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx (1)

35-35: 주석 내용을 수정하세요.

35번 줄 주석에서 "담당자 업데이트"라고 되어 있지만, 실제로는 컬럼을 업데이트하는 것입니다.

-            setColumn(column) // 담당자 업데이트
+            setColumn(column) // 선택된 컬럼 설정

src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx (1)

118-120: delete 연산자 대신 undefined 할당 사용

성능 향상을 위해 delete 연산자 대신 undefined를 할당하세요.

-    if (!data.dueDate) delete payload.dueDate
-    if (!data.imageUrl || !preview) delete payload.imageUrl
+    if (!data.dueDate) payload.dueDate = undefined
+    if (!data.imageUrl || !preview) payload.imageUrl = undefined

src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx (2)

65-76: 미완성 UI 구현 필요

플레이스홀더 텍스트와 하드코딩된 요소들을 실제 구현으로 교체하세요.

       <div>
-        그리드로 관리하기 / 컬럼명은 따로 컴포넌트로 만들어 빼기
-        <div>{column.title}</div>
+        <ColumnTitle title={columnTitle} />
         <Tags tags={tags} />
-        <p>설명~~~~~~~~</p>
+        <p className="Text-gray mt-16 text-14">{card.description}</p>
         <div>
-          <div>{assignee.nickname}</div>
-          <div>{dueDate}</div>
+          <MyAssignee assignee={assignee} />
+          {dueDate && <div className="Text-gray text-12">{dueDate}</div>}
         </div>
       </div>
-      <div> 이미지 있으면 이미지</div>
-      <div>댓글 컴포넌트</div>
+      {imageUrl && (
+        <div className="mt-16">
+          <Image src={imageUrl} alt={title} width={400} height={300} className="rounded-6" />
+        </div>
+      )}
+      {/* TODO: 댓글 컴포넌트 추가 */}

완성된 구현이 필요하신가요? 새로운 이슈를 생성해드릴까요?

---

49-51: 삭제 기능 구현 필요

삭제하기 옵션에 클릭 핸들러가 없습니다.

삭제 기능 구현을 도와드릴까요? 카드 삭제 API 호출과 확인 모달을 추가할 수 있습니다.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro